.grid {
  display: grid;
}


/** 
  Grid 布局，实现自适应布局
  xs < 576px, sm >= 576, md >= 768, lg >= 992, xl >= 1200, xxl >= 1600
*/
$grid-width: 576, 576, 768, 992, 1200, 1600;
$grid-list: xs, sm, md, lg, xl, xxl;
// 
@for $i from 1 through length($grid-list) {
  // .xs_col_#{nth($grid-list, $i)} {

  // }
  .val {
    // color: nth($grid-list, $i),
    color: gridName($i)
  }
}

@for $i from 1 to 12 {
  .sm_col_#{$i} {
    @extend .grid;
    grid-template-columns: repeat(auto-fit, minmax(576px, 1fr));
    @if($i == 2) {
      color: red;
    } @else if($i == 1) {
      color: greenyellow;
    }
  }
}
// grid 动态函数
@function gridTrends($width, $i) {
  @return repeat(auto-fit, minmax($width, 1fr));
}
@function gridName($n) {
  @return #{'.'$n}
}

.no_post_css {
  display: grid;
  // grid-template-columns: 1fr 1fr 1fr;
  // grid-template-columns: repeat(auto-fit, minmax(300px));
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  div {
    border: 1px solid;
    padding: 2px 0;
    background-color: skyblue;
  }
}
